---
title: Configuración del editor de código
description: Configura tu editor de código para desarrollar con Astro.
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Personaliza tu editor de código para mejorar tu experiencia de desarrollo con Astro y desbloquear nuevas funcionalidades.

## VS Code

[VS Code](https://code.visualstudio.com/) es un editor de código popular para desarrolladores web, desarrollado por Microsoft. El motor de VS Code también funciona en los editores de código en el navegador como [GitHub Codespaces](https://github.com/features/codespaces) y [Gitpod](https://gitpod.io/).

Astro funciona en cualquier editor de código. Sin embargo, recomendamos usar VS Code para tus proyectos de Astro. Nosotros mantenemos la [extensión oficial de Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) que desbloquea nuevas funcionalidades y mejora la experiencia de desarrollo para sus proyectos.

- Resaltado de sintaxis para archivos `.astro`.
- Información de tipos de TypeScript para archivos `.astro`.
- [Intellisense de VS Code](https://code.visualstudio.com/docs/editor/intellisense) para autocompletado, sugerencias y más.

Para empezar, instala la [extensión de Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).

import ReadMore from '~/components/ReadMore.astro'

<ReadMore>Aprende cómo [configurar TypeScript](/es/guides/typescript/) en tu proyecto de Astro.</ReadMore>

### IDE de JetBrains

El soporte inicial para Astro llegó a Webstorm 2023.1. Puedes instalar el plugin oficial a través de la [página de plugins de Jetbrains](https://plugins.jetbrains.com/plugin/20959-astro) o buscando "Astro" en la pestaña de Plugins y beneficiarte de las funciones tales como resaltado de sintaxis, formateo y autocompletado de código, con planes para agregar más funciones avanzadas en el futuro. También está disponible para las otras [IDEs de Jetbrains con soporte para Javascript](https://www.jetbrains.com/products/#lang=js&type=ide).


## Otros editores de código

Nuestra increíble comunidad mantiene extensiones para otros editores de código incluyendo:

- [Extensión de VS Code para Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode)<span style="margin: 0.25em;"><Badge variant="accent">oficial</Badge></span> - La extensión oficial de VS Code, está disponible en el registro de Open VSX para otras plataformas como [VSCodium](https://vscodium.com/).
- [Extensión de Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)<span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> - Provee resaltado de sintaxis y autocompletado para Astro en Nova.
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> - Provee resaltado de sintaxis, indentación y compatibilidad con folding de código para Astro en Vim o Neovim.
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) y [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> - Provee resaltado de sintaxis, análisis de árboles y autocompletado para Astro en Neovim.
- Emacs - Ve las instrucciones para [Configurar Emacs y Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Comunidad</Badge></span> para trabajar con Astro
- [Resaltado de sintaxis de Astro para Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - El paquete Astro para Sublime Text, disponible en el gestor de paquetes de Sublime Text.

## Editores de código del navegador

Además de editores de código locales, Astro también funciona en editores de código en el navegador, incluyendo:

- [StackBlitz](https://stackblitz.com/) y [CodeSandbox](https://codesandbox.io) - editores de código online del navegador, con resaltado de sintaxis incorporado para archivos `.astro`. ¡No necesita instalación o configuración!
- [GitHub.dev](https://github.dev/) - te permite instalar la extensión de Astro para VS Code como una [extensión web](https://code.visualstudio.com/api/extension-guides/web-extensions), la cual te da acceso a solo algunas de las características de la extensión completa. Actualmente, solo soporta el resaltado de sintaxis.
- [Gitpod](https://gitpod.io/) - es un entorno de desarrollo en la nube en el que puedes instalar la extensión de VS Code oficial desde Open VSX.

## Otras herramientas

### ESLint

[ESLint](https://eslint.org/) es un linter popular para JavaScript y JSX. Para activar la compatibilidad con Astro, puedes instalar [un plugin mantenido por la comunidad](https://github.com/ota-meshi/eslint-plugin-astro).

Consulta [la guía del usuario del proyecto](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) para obtener más información sobre cómo instalar y configurar ESLint para tu proyecto.

### Stylelint

[Stylelint](https://stylelint.io/) es un popular linter para CSS. Existe una [configuración de Stylelint mantenida por la comunidad](https://github.com/ota-meshi/stylelint-config-html) que ofrece soporte para Astro.

Las instrucciones de instalación, integración del editor e información adicional se pueden encontrar en el archivo README del proyecto.

### Prettier

[Prettier](https://prettier.io/) es un formateador popular para JavaScript, HTML, CSS y más. Si estás usando la [extensión de VS Code de Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) o [el servidor de lenguaje de Astro dentro de otro editor](#otros-editores-de-código), el formateo de código con Prettier está incluido.

Para dar soporte al formateo de archivos `.astro` fuera del editor (por ejemplo, CLI) o dentro de editores que no soportan nuestras herramientas de editor, instala [el plugin oficial de Prettier de Astro](https://github.com/withastro/prettier-plugin-astro).

Para comenzar, primero instala Prettier y el plugin:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

Prettier detectará automáticamente el plugin y lo usará para procesar los archivos `.astro` cuando lo ejecutes:

```shell
prettier --write .
```

Consulta el [README del plugin de Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) para obtener más información sobre sus opciones, cómo configurar Prettier dentro de VS Code y más.
